<template>
  <section class="component modify-cron">
    <el-form class="demo-ruleForm tableInput" :rules="rules" :model="modifyCron" ref="modify-form" label-width="110px">
      <el-form-item label="任务描述" prop="taskDescription" align="left">
        <el-input v-model="modifyCron.taskDescription" disabled></el-input>
      </el-form-item>
      <el-form-item label="表达式" prop="expressions" align="left">
        <el-input v-model="modifyCron.expressions"></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="modifyCommit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { SystemParamService } from '~/services/management-service/system-param.service';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import FileUpLoad from '~/components/common/file-upload.vue';
import { BatchManageService } from '~/services/management-service/batch-manage.service';
import clone from 'clone';
@Component({
  components: {
    FileUpLoad,
  },
})
export default class ModifyCron extends Vue {
  @Dependencies(SystemParamService)
  private sysParamService: SystemParamService;
  @Dependencies(BatchManageService)
  private batchManageService: BatchManageService;
  @Prop({})
  private modifyData: any;

  private modifyCron: any = {
    taskDescription: '',
    expressions:''
  };
  private rules: any = {
    taskDescription: [{ required: true, message: '请输入任务描述' }],
    expressions: [{ required: true, message: '请输入表达式' }]
  };

  @Emit('refreshList')
  public refreshList() {}

  @Watch('modifyData', { immediate: true })
  private modifyDataChange(value) {
    if (!value) return;
    this.modifyCron = clone(value);
  }

  /**
   * 取消
   */
  private cancel() {
    //   关闭修改参数dialog
    this.$emit('close');
    // 重置form表单
    const modifyForm: any = this.$refs['modify-form'];
    modifyForm.resetFields();
  }
  private modifyCommit() {
    const form: any = this.$refs['modify-form'];
    form.validate((result) => {
      if (!result) return;
      this.modifyData.expression = this.modifyCron.expressions
      this.batchManageService.modifyCronJob(this.modifyData).subscribe(
        (data) => {
          this.$message.success('操作成功');
          this.refreshList();
          this.$emit('close');
        }
      );
    });
  }
}
</script>

<style scoped>
</style>
